<%@ page import="csu.web.mypetstore.domain.Account" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%--<!DOCTYPE html>--%>

<%--<html>--%>

<%--<head>--%>
<%--    <title>MyPetStore</title>--%>
<%--    <link rel="StyleSheet" href="css/mypetstore.css" type="text/css" media="screen" />--%>
<%--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>--%>
<%--</head>--%>

<%--<body>--%>
<%--<div id="Header">--%>

<%--    <div id="Logo">--%>
<%--        <div id="LogoContent">--%>
<%--            <a href="mainForm"> <img src="images/logo-topbar.gif" /></a>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div id="Menu">--%>
<%--        <div id="MenuContent">--%>
<%--            <a href="cartForm"><img align="middle" name="img_cart" src="images/cart.gif" /></a>--%>
<%--            <img align="middle" src="images/separator.gif" />--%>
<%--            <c:if test="${sessionScope.loginAccount ==null}">--%>
<%--                <a href="signonForm">Sign In</a>--%>
<%--                <img align="middle" src="images/separator.gif" />--%>
<%--            </c:if>--%>

<%--            <c:if test="${sessionScope.loginAccount !=null}">--%>
<%--                <a href="signOut">Sign Out</a>--%>
<%--                <img align="middle" src="images/separator.gif" />--%>
<%--                <a href="myaccount">My Account</a>--%>
<%--                <img align="middle" src="images/separator.gif" />--%>
<%--            </c:if>--%>
<%--            <a href="help.html">?</a>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div id="Search">--%>
<%--        <div id="SearchContent">--%>
<%--            <form action="search" method="post">--%>
<%--                <input type="text" name="keyword" size="14" id="keyword">--%>
<%--                <input type="submit" value="Search">--%>
<%--            </form>--%>
<%--            <div id="productAutoComplete">--%>
<%--                <ul id="productAutoList">--%>
<%--                    &lt;%&ndash;<li class="productAutoItem">Amazon parrot</li>--%>
<%--                    <li class="productAutoItem">Labrador Retriever</li>--%>
<%--                    <li class="productAutoItem">Rattlesnake</li>--%>
<%--                    <li class="productAutoItem">Chihuahuat</li>--%>
<%--                    <li class="productAutoItem">Tiger Shark</li>&ndash;%&gt;--%>
<%--                </ul>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>



<%--    <div id="QuickLinks">--%>
<%--        <a href="categoryForm?categoryId=FISH"><image src="images/sm_fish.gif"/></a>--%>
<%--        <img src="images/separator.gif"/>--%>
<%--        <a href="categoryForm?categoryId=DOGS"><image src="images/sm_dogs.gif"/></a>--%>
<%--        <img src="images/separator.gif"/>--%>
<%--        <a href="categoryForm?categoryId=REPTILES"><image src="images/sm_reptiles.gif"/></a>--%>
<%--        <img src="images/separator.gif"/>--%>
<%--        <a href="categoryForm?categoryId=CATS"><image src="images/sm_cats.gif"/></a>--%>
<%--        <img src="images/separator.gif"/>--%>
<%--        <a href="categoryForm?categoryId=BIRDS"><image src="images/sm_birds.gif"/></a>--%>

<%--    </div>--%>
<%--</div>--%>

<%--<div id="Content">--%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="css/mystore.css">
    <title>Mypetstore</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <!-- 导航栏 -->
    <nav class="main-nav">
        <a href="mainForm"><img src="images/logo.png" alt="MyPetstore" class="logo"></a>
        <ul class="main-menu">
            <li><a href="categoryForm?categoryId=FISH">Fish</a></li>
            <li><a href="categoryForm?categoryId=DOGS">Dogs</a></li>
            <li><a href="categoryForm?categoryId=REPTILES">Reptiles</a></li>
            <li><a href="categoryForm?categoryId=CATS">Cats</a></li>
            <li><a href="categoryForm?categoryId=BIRDS">Birds</a></li>
        </ul>
        <ul class="right-menu">
            <c:if test="${sessionScope.loginAccount ==null}">
                <li><a href="signonForm">Sign In</a></li>
            </c:if>
            <c:if test="${sessionScope.loginAccount !=null}">
                <li><a href="signOut">Sign Out</a></li>
                <li><a href="myaccount">My Account</a></li>
            </c:if>
            <li><a href="help.html">Help</a></li>
            <li>
                <form action="search" method="post">
                    <!-- 搜索框可能出问题 -->
                    <input type="text" class="search-input"  name="keyword" id="keyword" placeholder="Product search"/>
                    <button type="submit" class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
                <div id="productAutoComplete">
                    <ul id="productAutoList">

                    </ul>
                </div>
            </li>
            <li>
                <a href="cartForm">
                    <i class="fas fa-shopping-cart"></i>
                </a>
            </li>
        </ul>
    </nav>
    <div id="Content">